<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>轨迹回放</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://webapi.amap.com/maps?v=1.3&key=4af5e6fdcaa77c9248d403cd3e965926"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

</head>
<body>
<div id="container"></div>
<div class="button-group" style="left:5px;text-align: center;"  >
    <input type="button" class="button" value="开始回放" id="start"/>
    <input type="button" class="button" value="暂停回放" id="pause"/></br>
    <input type="button" class="button" value="继续回放" id="resume"/>
    <input type="button" class="button" value="停止回放" id="stop"/>


</div>
<style type="text/css">
    .tanchu_wrap_map{border-radius: 10px; font-size:12px; overflow:hidden; font-family:"Microsoft Yahei","Hiragino Sans GB",tahoma,arial; position:relitive; width:225px; border: 1px solid #ccc; background:rgba(255,255,255,0.7)
    ;margin-top:-135px;}
    .tanchu_main{ height:120px; line-height:18px; margin:10px; margin-bottom:10px;}
    .tanchu_main span{display:block;}
    .tauchu_arrow_main{position:absolute; margin-left:100px;}
    .tanchu_arrow{position: absolute;  width: 0; height: 0; font-size: 0; border-width: 10px; border-style:solid dashed dashed  dashed; border-color: #ccc transparent transparent transparent; margin-top:1px;}
    .tanchu_arrow_1{position: absolute; width: 0; height: 0; font-size: 0; border-width: 10px; border-style:solid dashed dashed  dashed; border-color:#fff transparent transparent transparent;}
</style>
<script>
    var marker, lineArr = [];
    var map;
    var inforWindow;
    var arr;
    var num=0;
    var lineArr = ${str};
    var timer;
    var speed=12000;
    var isplay=false;
    var gpsInfoList = ${gpsInfoListStr};

    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [${gpsInfoList[0].longitude}, ${gpsInfoList[0].latitude}],
        zoom: 13
    });
    marker = new AMap.Marker({
        map: map,
        position: [${gpsInfoList[0].longitude}, ${gpsInfoList[0].latitude}],
        icon: "http://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        zoom: 13
    });

    /*var json = '${json}';

	var lbs = eval(json);

	$.each( lbs, function(i, n){
		  lineArr.push([n.longitude, n.latitude]);
	});
	*/
    // 绘制轨迹
    var polyline = new AMap.Polyline({
        map: map,
        path: lineArr,
        strokeColor: "#00A",  //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 3,      //线宽
        // strokeStyle: "solid"  //线样式
    });
    var passedPolyline = new AMap.Polyline({
        map: map,
        // path: lineArr,
        strokeColor: "#F00",  //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 3,      //线宽
        // strokeStyle: "solid"  //线样式
    });


    marker.on('moving',function(e){
        //console.log(e);
        passedPolyline.setPath(e.passedPath);
        inforWindow.setPosition(marker.getPosition());
        if(! map.getBounds().contains(marker.getPosition())){
            map.setCenter(marker.getPosition());
        }
    })

    marker.on('moveend',function(e){
        goon();
    });
    map.setFitView();

    AMap.event.addDomListener(document.getElementById('start'), 'click', function() {
        num=0;
        marker.moveAlong(lineArr, 500);
    }, false);
    AMap.event.addDomListener(document.getElementById('pause'), 'click', function() {
        marker.pauseMove();
    }, false);
    AMap.event.addDomListener(document.getElementById('resume'), 'click', function() {
        marker.resumeMove();
    }, false);
    AMap.event.addDomListener(document.getElementById('stop'), 'click', function() {
        marker.stopMove();
    }, false);
    goon();

    function goon(){
        var time = gpsInfoList[num].sendTime;
        inforWindow = new AMap.InfoWindow({
            isCustom:true,
            closeWhenClickMap:true,
            autoMove:false,
            position:lineArr[num],
            //size:new AMap.Size(250, 0),
            offset:new AMap.Pixel(2,-20),
            content:"<div class='tanchu_wrap_map'>"
            +"<div class='tanchu_main'>"
            +"<span><b>终端名称：</b>${carInfo.name}&nbsp;${carInfo.carNum}</span>"
            +"<span><b>终端号：${fns:getSim(carInfo.simNo)}</b></span>"
            +"<span><b>sim号：${carInfo.sim}</b></span>"
            +"<span><b>接收时间："+time+"</b></span>"
            +"<span><b>速度："+gpsInfoList[num].speed +"km/h</b></span>"
            +"<span><b>方向："+gpsInfoList[num].direction+"</b></span>"
            +"<span><b>位置："+gpsInfoList[num].location+"</b></span>"
            +"</div>"
        });
        inforWindow.open(map,marker.getPosition());
        num++;
    }
</script>
</body>
</html>